<html>

<head>
	<title>WebTag</title>

	<script type="text/javascript" src="cookie.js"></script>
	<script type="text/javascript" src="flickr_misc.js"></script>
	<!--<script type="text/javascript" src="flickrDOM.js"></script>-->
	<script type="text/javascript" src="FlickrAjax.js"></script>
	<script type="text/javascript" src="FlickrPhotoset.js"></script>
	<script type="text/javascript" src="FlickrPhoto.js"></script>
	<script type="text/javascript">

var currentPopup = null;
var token = null;

function checkAuthorization()
{
	showPopup("authorization_check_popup");

	if (Cookies["token"] != null) {
		token = Cookies["token"];
		var response = getFromFlickrSynch("flickr.auth.checkToken", { }, false);
		if (response == null) {
			// reset token so new calls don't send old token
			token = null;
			Cookies.erase("token");
			return showPopup("authorization_popup");
		}
	}
	else {
		var frob = getFrobFromQueryString();
		if (frob == null)
			return showPopup("authorization_popup");

		var response = getFromFlickrSynch("flickr.auth.getToken", {"frob": frob});
		if (response == null)
			return showPopup("authorization_popup");

		token = response.auth.token._content;
		Cookies.create("token", token);
	}

	document.getElementById("user_name").innerHTML = response.auth.user.username;
	showPopup("set_selection_popup");
	listSets();
}


function listSets(response)
{
	if (response == null)
		flickrAjaxManager.get("flickr.photosets.getList", { }, listSets);
	else {
		var setSelectElement = document.getElementById("set_selection_form").set;
		while (setSelectElement.length > 0)
			setSelectElement.remove(0);
		for (i in response.photosets.photoset) {
			var photoset = response.photosets.photoset[i];
			var newOption = document.createElement("option");
			newOption.value = photoset.id;
			newOption.text = photoset.title._content;
			setSelectElement.add(newOption, null);
		}
		document.getElementById("sets_message").innerHTML = "Select a set";
		document.getElementById("set_selection_form").go.disabled = false;
	}
}


function getFrobFromQueryString()
{
	var frobStarter = "?frob=";
	return window.location.search.length > frobStart.length && window.location.search.indexOf(frobStarter) == 0
		? window.location.search.substring(frobStart.length, window.location.search.length) : null;
}


function hidePopup()
	{ showPopup(null); }


function showPopup(newPopupId)
{
	if (newPopupId == null) {
		document.getElementById("overlay").style.display = "none";
		document.getElementById("popup_container").style.display = "none";
	}

	if (currentPopup != null)
		currentPopup.style.visibility = "hidden";

	var newPopup = null;
	if (newPopupId != null) {
		newPopup = document.getElementById(newPopupId);
		newPopup.style.visibility = "visible";
		// There is no harm in reshowing these.
		document.getElementById("overlay").style.display = "block";
		document.getElementById("popup_container").style.display = "table";
	}

	currentPopup = newPopup;
}


/*
function populateSets()
	{ populateSelectWithSets(document.set_selection_form.set, jsonSets, false); }

function populateSetsByName()
	{ populateSelectWithSets(document.set_selection_form.set, jsonSets, true); }
*/


function getSelectedSetId()
{
	var setSelectElement = document.getElementById("set_selection_form").set;
	return setSelectElement.length > 0 ? setSelectElement.options[setSelectElement.selectedIndex].value : null;
}


var photoset = null;
function setSelected()
{
	var setId = getSelectedSetId();
	if (setId == null) {
		alert("Select a valid set");
		return;
	}

	hidePopup();
	photoset = new FlickrPhotoset(setId, flickrAjaxManager);
	// set_title
	// photo_count
	showNextPhoto();
}


var allowShowPrevPhoto = true;
function showPrevPhoto(photo)
{
	if (!photoset)
		return;

	// Even though we apply tags before requesting next photo, the tags could change before the next photo comes back.
	// We call applyTags before checking which state this function is in to capture that change.
	applyTags();

	if (photo != null)
		refreshPhoto(photo);
	else {
		if (!allowShowPrevPhoto)
			return;
		allowShowPrevPhoto = false;
		setTimeout(function() { allowShowPrevPhoto = true; }, 250);

		photoset.callbackPrevPhoto(showPrevPhoto);
	}
}


var allowShowNextPhoto = true;
function showNextPhoto(photo)
{
	if (!photoset)
		return;

	// Even though we apply tags before requesting next photo, the tags could change before the next photo comes back.
	// We call applyTags before checking which state this function is in to capture that change.
	applyTags();

	if (photo != null)
		refreshPhoto(photo);
	else {
		if (!allowShowNextPhoto)
			return;
		allowShowNextPhoto = false;
		setTimeout(function() { allowShowNextPhoto = true; }, 250);

		photoset.callbackNextPhoto(showNextPhoto);
	}
}


function refreshPhoto(photo)
{
	if (photo == null)
		return;

	// photo_number
	// photo_title
	document.getElementById("photo_link").href = "http://flickr.com/photos/altruic/" + photo.getId();
	document.getElementById("photo_img").src = photo.getUrl();
	refreshTags();
}


function applyTags() { }


function refreshTags()
{
	// tags
}


var flickrAjaxManager = new FlickrAjaxManager();	
//flickrAjaxManager.onupdated = refreshStats;


// fixme: figure out how to support iphone google images swipe-browsing
function onKeyDown(event)
{
	switch (event.keyCode) {
		case 37 : // left arrow
		case 96 : // numpad 0
			showPrevPhoto();
			break;
		case 39 : // right arrow
		case 13 : // enter
			showNextPhoto();
			break;
		case 189 : // minus/underscore key
		case 109 : // numpad minus
			window.alert("tag removal mode would begin now (if coded)");
			break;
		case 187 : // equal/plus key
		case 107 : // numpad plus
			window.alert("tag addition mode would begin now (if coded)");
			break;
	}
}

window.onkeydown = onKeyDown;

	</script>

	<style type="text/css">
#authorization_button { visibility: collapsed; }
#welcome_msg { visibility: collapsed; }
#set_selection { visibility: collapsed; }


#overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	background-color: black;
	opacity: 0.75;
	z-index: 1000;

	/* "display: none;" when hidden */
}


#popup_container {
	width: 100%;
	height: 100%;

	position: fixed;
	top: 0px;
	left: 0px;

	z-index: 1001;
	display: table; /* "none" when hidden */
}


.popup {
	display: table-cell;
	vertical-align: middle;	

	visibility: hidden; /* "visible" when shown */
}


.popup_content {
	background-color: white;
	border: solid 1px black;
	/*margin: 0px auto; -- doesn't work*/
}
	</style>
</head>

<body onload="checkAuthorization();">

<p id="set_title">[set title]</p>
<p><span id="photo_count">[photo count]</span> photo(s)</p>
<p id="photo_number">[photo number]</p>
<p id="photo_title">[photo title]</p>
<ul id="prev_navigation">
	<li class="all">First</li>
	<li class="single">Previous</li>
</ul>
<ul id="next_navigation">
	<li class="single">Next</li>
	<li class="all">Last</li>
</ul>
<a id="photo_link" href="./"><img id="photo_img" src="img/no_photo.png" /></a>
<ul id="tags">
	<!-- <li class="remove">tag to remove</li> -->
	<!-- <li>original tag</li> -->
	<!-- <li class="ad">tag to add</li> -->
</ul>
<table>
	<tr>
		<td id="pad_7" class="pad">7</td>
		<td id="pad_8" class="pad">8</td>
		<td id="pad_9" class="pad">9</td>
	</tr>
	<tr>
		<td id="pad_4" class="pad">4</td>
		<td id="pad_5" class="pad">5</td>
		<td id="pad_6" class="pad">6</td>
	</tr>
	<tr>
		<td id="pad_1" class="pad">1</td>
		<td id="pad_2" class="pad">2</td>
		<td id="pad_3" class="pad">3</td>
	</tr>
</table>

<div id="pad_0">Previous</div>
<div id="pad_enter">Next</div>
<ul id="modes">
	<li id="addition_mode">+: add tags</li>
	<li id="removal_mode">-: remove tags</li>
	<li id="description_mode">space: describe</li>
	<li id="reassignment_mode">/: reassign tags</li>
</ul>
<ul id="tasks" title="Task List">
	<!-- <li class="priority">Retrieve next 10 photos</li> -->
	<!-- <li>Set tags for photo IMG_0784: dan, eric, liz</li> -->
</ul>

<div id="overlay"></div>

<div id="popup_container">

	<div id="authorization_check_popup" class="popup" style="visibility: visible;">
		<div class="popup_content">
			<p>Checking authorization...</p>
		</div>
	</div>

	<div id="authorization_popup" class="popup">
		<div class="popup_content">
			<p>Not authorized</p>
			<form id="authorize_form" action="auth.php">
				<input type="submit" value="Click to authorize" />
			</form>
		</div>
	</div>

	<div id="set_selection_popup" class="popup">
		<div class="popup_content">
			<p>Authorized</p>
			<p>Welcome, <span id="user_name">[user name]</span></p>
			<p id="sets_message">Loading sets...</p> <!-- transforms to "Select a set" after loading is complete -->
			<form id="set_selection_form" onsubmit="setSelected(); return false;">
				<select name="set"></select>
				<input type="submit" name="go" value="Go" disabled="true" />
			</form>
		</div>
	</div>

	<div id="describe_popup" class="popup">
		<div class="popup_content">
			<form id="describe_form" onsubmit="sendData(); hidePopup(); clearValues(); return false;">
				<label for="title_text">Title</label>
				<input type="text" name="title" />
				<label for="description_text">Description</label>
				<textarea name="description" id="description_text" rows="4" cols="40"></textarea>		
				<input type="button" value="Cancel" onclick="hidePopup(); clearValues(); return false;" />
				<input type="submit" value="OK"/>
			</form>
		</div>
	</div>

	<div id="pad_edit_popup" class="popup">
		<div class="popup_content">
			<table>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</table>
			<p id="current_value">[current value]</p>
			<form id="pad_edit_form" onsubmit="saveValue(); hidePopup(); clearValues(); return false;">
				<label for="tag_text">New tag for pad <span id="pad_number">[pad number]</span><label>
				<input type="text" name="tag" id="tag_text" />
				<input type="button" value="Cancel" onclick="hidePopup(); clearValueS(); return false;" />
				<input type="submit" value="OK" />
			</form>
		</div>
	</div>

</div> <!-- #popup_container -->

</body>

</html>
